/**
 * 图表主题工具
 * 为 ECharts 提供浅色和深色主题的颜色配置
 */

// 获取当前主题
const getCurrentTheme = () => {
  if (typeof window === 'undefined') return 'light'

  // 检查 HTML 元素是否有 dark 类
  const htmlElement = document.documentElement
  return htmlElement.classList.contains('dark') ? 'dark' : 'light'
}

// 浅色主题颜色配置
const lightTheme = {
  background: 'transparent',
  textColor: '#333333',
  axisColor: '#666666',
  splitLineColor: '#e0e0e0',
  itemColors: [
    '#409EFF', // 主蓝色
    '#67C23A', // 成功绿
    '#E6A23C', // 警告橙
    '#F56C6C', // 危险红
    '#909399', // 信息灰
    '#606266', // 深灰
    '#53a8ff', // 浅蓝
    '#85ce61', // 浅绿
    '#ebb563', // 浅橙
    '#f78989', // 浅红
  ],
  gradientColors: {
    blue: ['#409EFF', '#66b1ff', '#8cc8ff'],
    green: ['#67C23A', '#85ce61', '#a4da89'],
    orange: ['#E6A23C', '#ebb563', '#f0c789'],
    red: ['#F56C6C', '#f78989', '#f9a6a6']
  }
}

// 深色主题颜色配置
const darkTheme = {
  background: 'transparent',
  textColor: '#e0e0e0',
  axisColor: '#999999',
  splitLineColor: '#404040',
  itemColors: [
    '#409EFF', // 主蓝色（保持不变）
    '#67C23A', // 成功绿（保持不变）
    '#E6A23C', // 警告橙（保持不变）
    '#F56C6C', // 危险红（保持不变）
    '#909399', // 信息灰（保持不变）
    '#c0c4cc', // 浅灰
    '#79bbff', // 亮蓝
    '#95d475', // 亮绿
    '#f3d19e', // 亮橙
    '#fab6b6', // 亮红
  ],
  gradientColors: {
    blue: ['#409EFF', '#79bbff', '#a0d0ff'],
    green: ['#67C23A', '#95d475', '#b3e08b'],
    orange: ['#E6A23C', '#f3d19e', '#fad399'],
    red: ['#F56C6C', '#fab6b6', '#fcc6c6']
  }
}

// 获取当前主题颜色配置
const getThemeColors = () => {
  const theme = getCurrentTheme()
  return theme === 'dark' ? darkTheme : lightTheme
}

// 为 ECharts 配置提供通用的主题设置
export const getChartThemeOptions = () => {
  const colors = getThemeColors()

  return {
    backgroundColor: colors.background,
    textColor: colors.textColor,
    axisColor: colors.axisColor,
    splitLineColor: colors.splitLineColor,
    colors: colors.itemColors,
    tooltip: {
      backgroundColor: getCurrentTheme() === 'dark' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
      borderColor: colors.splitLineColor,
      textStyle: {
        color: colors.textColor
      }
    },
    legend: {
      textStyle: {
        color: colors.textColor
      }
    },
    grid: {
      borderColor: colors.splitLineColor
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: colors.axisColor
        }
      },
      axisTick: {
        lineStyle: {
          color: colors.axisColor
        }
      },
      axisLabel: {
        color: colors.textColor
      },
      splitLine: {
        lineStyle: {
          color: colors.splitLineColor
        }
      }
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: colors.axisColor
        }
      },
      axisTick: {
        lineStyle: {
          color: colors.axisColor
        }
      },
      axisLabel: {
        color: colors.textColor
      },
      splitLine: {
        lineStyle: {
          color: colors.splitLineColor
        }
      }
    }
  }
}

// 获取风险等级颜色
export const getRiskLevelColor = (level) => {
  const colors = getThemeColors()
  switch (level) {
    case '高':
      return colors.gradientColors.red[0]
    case '中':
      return colors.gradientColors.orange[0]
    case '低':
      return colors.gradientColors.green[0]
    default:
      return colors.itemColors[4]
  }
}

// 获取渐变色配置
export const getGradientColor = (type, direction = 'horizontal') => {
  const colors = getThemeColors().gradientColors[type]
  if (!colors) return colors.itemColors[0]

  const gradientConfig = {
    type: 'linear',
    x: direction === 'horizontal' ? 0 : 0,
    y: direction === 'horizontal' ? 0 : 0,
    x2: direction === 'horizontal' ? 1 : 0,
    y2: direction === 'horizontal' ? 0 : 1,
    colorStops: colors.map((color, index) => ({
      offset: index / (colors.length - 1),
      color: color
    }))
  }

  return gradientConfig
}

// 监听主题变化的工具函数
export const watchThemeChange = (callback) => {
  if (typeof window === 'undefined') return

  // 创建 MutationObserver 来监听类名变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        callback(getCurrentTheme())
      }
    })
  })

  // 监听 HTML 元素的类名变化
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  })

  return observer
}

export {
  lightTheme,
  darkTheme,
  getCurrentTheme,
  getThemeColors
}